<template>
  <!-- 方案规划导航栏 -->
  <div style="height: 100%;z-index: 1;">
     
                
      <div id="areaDiv1" style="position: absolute;left: 4vh;top: 14vh;height: 17vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/fj.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">风机</div>
          </div>
          
          <div style="margin-left: 1vh;margin-top: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              配置容量：
              <el-input style="width:60%;" readonly="true" v-model="form.fanConfCapacity">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              设备数量：
              <el-input style="width:60%;height: 31px;" readonly="true" v-model="form.fanDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div> 
          </div>

      </div>
 
 
 
            
      <div id="areaDiv2" style="position: absolute;left: 4vh;top: 35vh;height: 17vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gf_w.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">光伏</div>
          </div>
          
          <div style="margin-left: 1vh;margin-top: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              配置容量：
              <el-input style="width:60%;" readonly="true" v-model="form.photovoltaicConfCapacity">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              设备数量：
              <el-input style="width:60%;height: 31px;" readonly="true" v-model="form.photovoltaicDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div> 
          </div>

      </div>
 
    
    
      <div id="areaDiv3" style="position: absolute;left: 4vh;top: 56vh;height: 12vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dw.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">电网</div>
          </div>
          
          <div style="margin-left: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0vh;display: inline-flex;">
              实时购电量：
              <el-input style="width:50%;margin-left: 1vh;" readonly="true" v-model="form.purchaseElectricity">
                <template slot="append">kW</template>
              </el-input>
            </div>
            
          </div>
      </div>

      <div style="position: absolute;left: 4vh;top: 70vh;height: 7vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" style="width: 4vh;height: 4vh;" src="../../assets/images/time.png" />
            <div style="width: 90%;font-size: 2vh; margin-top: 2vh;margin-left: 1vh;color: #FFFFFF;font-family: cursive;display: inline-flex;">
              时间：
              <el-input style="width:65%;margin-left: 1vh;" @change="queryPageData" v-model="queryTime">
                <template slot="append">点</template>
              </el-input>
            </div>
          </div>
      </div>

      <div id="anchorPoin1" style="width: 1vh;height: 1vh;left: 33vh;top: 44.78vh;float: right;position: absolute;"></div>

      <div id="anchorPoin2" style="width: 1vh;height: 1vh;left: 159.1vh;top: 44.82vh;float: right;position: absolute;"></div>

      <div id="lineDiv1" style="position: absolute;left: 50vh;top: 15vh;height: 74%;width: 0.5vh;background: #95ef8499;" ></div>

      <div id="areaDiv4" style="position: absolute;left: 67vh;top: 19vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/djc.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">碱性电解槽</div>
          </div>
          
          <div style="margin-left: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              配置容量：
              <el-input style="width:60%;" readonly="true" v-model="form.alkalineConfCapacity">
                <template slot="append">kW</template>
              </el-input>
            </div>
            
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              设备数量：
              <el-input style="width:60%;" readonly="true" v-model="form.alkalineDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              实时功率：
              <el-input style="width:60%;height: 31px;" readonly="true" v-model="form.alkalineRealPower">
                <template slot="append">kW</template>
              </el-input>
            </div>

          </div>

      </div>

      
      <div id="areaDiv5" style="position: absolute;left: 67vh;top: 49vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/djc_w.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">PEM电解槽</div>
          </div>
          
          <div style="margin-left: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              配置容量：
              <el-input style="width:60%;" readonly="true" v-model="form.pemConfCapacity">
                <template slot="append">kW</template>
              </el-input>
            </div>
            
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              设备数量：
              <el-input style="width:60%;" readonly="true" v-model="form.pemDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              实时功率：
              <el-input style="width:60%;height: 31px;" readonly="true" v-model="form.pemRealPower">
                <template slot="append">kW</template>
              </el-input>
            </div>

          </div>
      </div>

      <div id="lineDiv2" style="position: absolute;left: 112vh;top: 15vh;height: 74%;width: 0.5vh;background: rgb(41 194 239 / 55%);" ></div>

      
      <div id="areaDiv6" style="position: absolute;left: 130vh;top: 14vh;height: 12vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/ysj.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">压缩机</div>
          </div>
          
          <div style="margin-left: 1vh;margin-top:0vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              设备数量：
              <el-input style="width:60%;" readonly="true" v-model="form.compressDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div> 
          </div>

      </div>

      
      <div id="areaDiv7" style="position: absolute;left: 130vh;top: 35vh;height: 25vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cqg.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">储氢罐</div>
          </div>
          
          <div style="margin-left: 1vh;margin-top: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              储氢容量：
              <el-input style="width:60%;" readonly="true" v-model="form.hydrogenStorageCap">
                <template slot="append">kg</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              设备数量：
              <el-input style="width:60%;height: 31px;" readonly="true" v-model="form.hydrogenStorageDevicesNumber">
                <template slot="append">个</template>
              </el-input>
            </div> 

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              实时储氢量：
              <el-input style="width:53%;height: 31px;" readonly="true" v-model="form.realTimeHydrogenCap">
                <template slot="append">kg</template>
              </el-input>
            </div> 

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              实时充放量：
              <el-input style="width:53%;height: 31px;" readonly="true" v-model="form.realTimeHydrogenCdCap">
                <template slot="append">kg</template>
              </el-input>
            </div> 

          </div>

      </div>

      
      <div id="areaDiv8" style="position: absolute;left: 130vh;top: 61vh;height: 12vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/qqfh.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">氢气负荷</div>
          </div>
          
          <div style="margin-left: 1vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0vh;display: inline-flex;">
              实时需求：
              <el-input style="width:60%;" readonly="true" v-model="form.realTimeDemand">
                <template slot="append">kg</template>
              </el-input>
            </div>
            
          </div>

      </div>

      <!-- <div id="lineDiv3" style="position: absolute;left: 170vh;top: 15vh;height: 74%;width: 0.5vh;background: rgb(41 194 239 / 55%);" ></div> -->

  </div>
</template>

<script>


  export default {
    name: 'configurationPlan',
    
    beforeRouteLeave (to, from, next) {
      
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
        
        if(connRem){ 
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.$nextTick(function(){
            this.$jsPlumbObj.deleteConnection(connRem);  
          });
        }

      }

            
      var connDivs = $(".jtk-connector");
      var endpointDivs = $(".jtk-endpoint");

      if(connDivs){
        for(var i = 0;i<connDivs.length;i++){
          var dom = connDivs[i];
          $(dom).remove();
        }
      }

      if(endpointDivs){
        for(var i = 0;i<endpointDivs.length;i++){
          var dom = endpointDivs[i];
          $(dom).remove();
        }
      }

      next();
    },
    data() {
      return {
        form: {
          id:"", 
          projectId : "",
          isHavaCqg: '1',
          isHavaFj: '1',
          isHavaGf: '1',
          isHavaDw: '1',
          isHavaDjc: '1',  

          fanConfCapacity : "",
          fanDevicesNumber : "",
          photovoltaicConfCapacity : "",
          photovoltaicDevicesNumber : "",

          purchaseElectricity : "",
          alkalineConfCapacity : "",
          alkalineRealPower : "",
          alkalineDevicesNumber : "",

          pemConfCapacity : "",
          pemRealPower : "",
          pemDevicesNumber : "", 

          compressDevicesNumber : "",
          hydrogenStorageCap : "",
          hydrogenStorageDevicesNumber : "",
          realTimeHydrogenCap : "",
          realTimeHydrogenCdCap : "",
          realTimeDemand : "",  
        },
        projectId : "",
        queryTime : "0",
        $jsPlumbObj : {},
        connectionMaps : {}, 
        connectionArr : [],
        schemeId : "",
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.form.projectId = this.projectId;
      this.schemeId = this.$route.query.schemeId;
      this.connectionMaps = this.getMap();
      this.generateWorkFlow();
      this.queryPageData();
    },
    methods: {  

        queryPageData : function(){

          var vm = this;

          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryEwConfigurationPlan?queryTime='+this.queryTime+"&schemeId="+this.schemeId+"&tableName=ew_configuration_plan"+"&projectId=").then((res) => {
            var result = res.data.data;
            if(result){
              vm.form = result;

              
              if(vm.form.isHavaGf=="1"){
                $("#areaDiv2").attr("class","areaBox");
              }else{
                $("#areaDiv2").attr("class","disableAreaBox");
              }
                  
              if(vm.form.isHavaFj=="1"){
                $("#areaDiv1").attr("class","areaBox");
              }else{
                $("#areaDiv1").attr("class","disableAreaBox");
              }

                  
              if(vm.form.isHavaDw=="1"){
                $("#areaDiv3").attr("class","areaBox");
              }else{
                $("#areaDiv3").attr("class","disableAreaBox");
              }

              if(vm.form.isHavaCqg=="1"){
                $("#areaDiv7").attr("class","areaBox");
              }else{
                $("#areaDiv7").attr("class","disableAreaBox");
              }

              if(vm.form.isHavaDjc=="1"){
                $("#areaDiv4").attr("class","areaBox");
                $("#areaDiv5").attr("class","disableAreaBox");
              }else if(vm.form.isHavaDjc=="2"){
                $("#areaDiv5").attr("class","areaBox");
                $("#areaDiv4").attr("class","disableAreaBox");
              }

            }
          }).catch((error) => {
            console.log(error);
          });

        },
        getMap : function() {
          
          //初始化map_,给map_对象增加方法，使map_像Map
          var map_ = new Object();
          map_.put = function(key, value) {
              map_[key+'_'] = value;
          };
          map_.get = function(key) {
              return map_[key+'_'];
          };
          map_.remove = function(key) {
              delete map_[key+'_'];
          };
          map_.keyset = function() {
              var ret = "";
              for(var p in map_) {
                  if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                      ret += ",";
                      ret += p.substring(0,p.length-1);
                  }
              }
              if(ret == "") {
                  return ret.split(",");
              } else {
                  return ret.substring(1).split(",");
              }
          };
          return map_;
      },

      generateWorkFlow : function(){

 
         var color1 = "#6ba785";
         var color2 = "#4AA0D6"; 

          

          var anchor = ['Right', 'Left'];

          this.connectDiv("areaDiv1","lineDiv1",anchor,"",color1,"");

          
          var anchor = ['Right', 'Left'];
          this.connectDiv("anchorPoin1","lineDiv1",anchor,"",color1,"");

          this.connectDiv("areaDiv3","lineDiv1",anchor,"",color1,"");
   

          this.connectDiv("lineDiv1","areaDiv4",anchor,"",color1,"");
          this.connectDiv("lineDiv1","areaDiv5",anchor,"",color1,"");

 
          this.connectDiv("areaDiv4","lineDiv2",anchor,"",color2,"");
          this.connectDiv("areaDiv5","lineDiv2",anchor,"",color2,"");
 
          this.connectDiv("lineDiv2","areaDiv6",anchor,"",color2,""); 

          var anchor = ['Bottom', 'Top'];
          this.connectDiv("areaDiv6","areaDiv7",anchor,"",color2,"");
          var anchor = ['Right', 'Left'];

          this.connectDiv("areaDiv6","lineDiv3",anchor,"",color2,"");
          this.connectDiv("anchorPoin2","lineDiv3",anchor,"",color2,"");

          this.connectDiv("lineDiv3","areaDiv8",anchor,"",color2,"");


          this.connectDiv("areaDiv6","areaDiv8",anchor,"",color2,"");

      },
    
 
    
      connectDiv : function(source,target,anchor,connector,stroke,label){
 

          var jsPlumbObj = this.getJsPlumb(stroke,connector);
  
          if(label){

              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", {  location: 1 }], 
                      label
                  ] 
              });
              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
            }else{
                          
              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", {  location: 1 }], 
                  ] 
              });
              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
          }

          window.addEventListener('resize', () => {
              jsPlumbObj.repaintEverything()
          })

          return jsPlumbObj;

      },
 

      
      getJsPlumb(lineColor,connector){
          
          var connectorValue = "Flowchart";

          if(connector!=null&&connector!=""){
              connectorValue = connector;
          }

          this.$jsPlumbObj = this.$jsPlumb;

          var jsPlumb = this.$jsPlumb.getInstance({

              ConnectionsDetachable   : false,//连接是否可以使用鼠标默认分离

              //  Endpoint:['Image', {
              //    src: 'static/images/def_endpoint.png',
              //  }] , // 端点的形状
              Anchor: "Continuous", 
              Endpoint : "Blank",//端点（锚点）的样式声明（Dot）
              EndpointStyle: { radius: 1, fill: "#FFFFFF" }, //端点默认样式
              PaintStyle: { stroke: lineColor, strokeWidth: 3  }, // 连线样式
              HoverPaintStyle: { stroke: lineColor }, // 默认悬停样式
              // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
              EndpointHoverStyle: { fill: lineColor }, // 端点悬停样式
              ConnectionOverlays: [
              [
                  "Arrow",
                  {
                      // 箭头
                      location: 1,
                      visible: true,
                      // paintStyle: {
                      //     stroke: lineColor,
                      //     fill: lineColor
                      // }
                  }
                  
              ]
              ],
              Connector: [connectorValue, { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
              DrapOptions: { cursor: "crosshair", zIndex: 2000 },
              Scope: "jsPlumb_DefaultScope"
          });

          return jsPlumb;

      },
 

    }
  }
</script>

<style scoped>

  /deep/ .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #f2f2f2;
      display: inline-block;
      font-size: inherit;
      height: 31px;
      line-height: 31px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }

.imgClass{
  vertical-align: middle;
  margin-top: 1.5vh;
  margin-left: 2vh;
  width: 5vh;
  height: 5vh;
}
 


.areaBox{
  display: block;
  width: 30vh;
  height: 20vh;
  border-radius: 2vh;
  background-image: linear-gradient(to right, #425bb5, #8ecd7e7a);
  cursor: pointer;
}

.disableAreaBox{
  display: block;
  width: 30vh;
  height: 20vh;
  border-radius: 2vh;
  background-image: linear-gradient(to right, #232a47, #5656577a);
  cursor: pointer;
}


</style>
